<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.nav{
				width:120px;
				height:40px;
				line-height: 40px;
				text-align: center;
				border:1px solid black;
				position:relative;
			}
			.nav .content{
				width:120px;
				height:200px;
				border:1px solid blue;
				position:absolute;
				top:40px;
				left:0px;
				display: none;
			}
		</style>
		<script>
			window.onload = function(){
				var oNav = document.getElementsByClassName('nav')[0];
				var oTitle = oNav.children[0];
				var oContent = oNav.children[1];
				
				oNav.onclick = function(ev){
					var ev = window.event || ev;
					oContent.style.display = 'block';
//					以下两行代码用于阻止冒泡.如果不阻止那么点击事件会冒泡给文档,会触发文档的单击事件.文档单击事件是让内容区隐藏.因此点击会发现,内容区无法显示了.所以要阻止冒泡.
					ev.stopPropagation();
					ev.cancelBubble = true;
				}
				document.onclick = function(){
					oContent.style.display = 'none';
				}
				
				
			}
		</script>
	</head>
	<body>

		<div class="nav">
			<div class="title">电影</div>
			<div class="content">内容</div>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
